<template>
  <section class="component repayment-confirmation">
    <data-form :model="model" @onSearch="refreshData" @handleResetForm="handleResetForm" :page="pageService">
      <template slot="inputs">
        <el-form-item label="订单号" prop="caseNumber">
          <el-input v-model="model.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="委托方" prop="principalId">
          <el-select v-model="model.principalId" placeholder="请选择" clearable>
            <el-option v-for="{index,name,id} in principalList.content" :key="index" :label="name" :value="id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="催收部门" prop="deptName">
          <el-input v-model="model.deptName"></el-input>
        </el-form-item>
        <el-form-item label="催收人员" prop="collectorRealName">
          <el-input v-model="model.collectorRealName"></el-input>
        </el-form-item>
        <el-form-item label="申请时间" prop="createTime">
          <el-date-picker type="datetimerange" :editable="false" v-model="model.createTime" placeholder="选择日期时间" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="回款日期" prop="entryTime">
          <el-date-picker type="daterange" :editable="false" v-model="model.entryTime" placeholder="选择日期时间" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="回款金额" prop="repayAmount">
          <number-range v-model="model.repayAmount"></number-range>
        </el-form-item>
        <el-form-item label="状态" prop="confirmState">
          <el-select v-model="model.confirmState" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('RepaymentConfirmState')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="确认时间" prop="manualConfirmDate">
          <el-date-picker type="datetimerange" :editable="false" v-model="model.manualConfirmDate" placeholder="选择日期时间" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="确认人员" prop="manualConfirmRealName">
          <el-input v-model="model.manualConfirmRealName"></el-input>
        </el-form-item>
        <el-form-item label="回款账户" prop="repaymentAcctname">
          <el-input v-model="model.repaymentAcctname"></el-input>
        </el-form-item>
        <el-form-item label="回款账号" prop="repaymentAcctno">
          <el-input v-model="model.repaymentAcctno"></el-input>
        </el-form-item>
        <el-form-item label="收款账户" prop="receiveAcctname">
          <el-input v-model="model.receiveAcctname"></el-input>
        </el-form-item>
        <el-form-item label="收款账号" prop="receiveAcctno">
          <el-input v-model="model.receiveAcctno"></el-input>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" @onPageChange="refreshData" :sort="sortService" :page="pageService">
      <template slot="columns">
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <el-button type="text" @click="onClickSure(scope.row)" v-if="scope.row.confirmState === 'WAIT_CONFIRM'" v-auth="111">确认</el-button>
            <el-button type="text" @click="onClickDetial(scope.row)" v-else v-auth="112">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="caseNumber" label="订单编号" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            <el-button type="text" @click="openExecutionPage(scope.row)">{{scope.row.caseNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="principalName" label="委托方" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="deptName" label="催收部门" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="collectorRealName" label="催收人员" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间" :formatter="(row) => $filter.dateTimeFormat(row.createTime)" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="entryTime" label="回款日期" :formatter="(row) => $filter.dateFormat(row.entryTime)" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="repayAmount" label="回款金额" :min-width="$helper.getColumnWidth(6)" :formatter="(row) =>  $filter.toThousands(row.repayAmount)">
        </el-table-column>
        <el-table-column prop="confirmState" label="状态" :formatter="(row) => $filter.dictConvert(row.confirmState,'RepaymentConfirmState')" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="manualConfirmDate" label="确认时间" :min-width="$helper.getColumnWidth(6)" :formatter="(row) => $filter.dateTimeFormat(row.manualConfirmDate)">
        </el-table-column>
        <el-table-column prop="manualConfirmRealName" label="确认人员" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="repaymentAcctname" label="回款账户" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="repaymentAcctno" label="回款账号" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="receiveAcctname" label="收款账户" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="receiveAcctno" label="收款账号" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="remark" label="备注" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
      </template>
    </data-box>

    <el-dialog title="确认" :center="true" :visible.sync="dialog" width="700px" :close-on-click-modal="false" :close-on-press-escape="false" @open="$nextTick(() => $refs['repayment-confirmation-detail'].imageFileList())">
      <repayment-confirmation-detail ref="repayment-confirmation-detail" :rowData="rowData" @close="dialog = false" @refreshList="refreshData"></repayment-confirmation-detail>
    </el-dialog>
  </section>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Dependencies, Layout,Auth } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import NumberRange from "~/components/common/number-range.vue";
import SelectDepartment from "~/components/business-component/select-department.vue";
import { MENU_CHANNEL } from '../../config/enum.config';
import { State } from "vuex-class";
import { CaseRepaymentService } from '~/services/domain-service/case-repayment.service'
import RepaymentConfirmationDetail from '~/components/case-import/repayment-confirmation-detail.vue'

@Auth(110)
@Layout("workspace")
@Component({
  components: {
    NumberRange,
    SelectDepartment,
    RepaymentConfirmationDetail
  }
})
export default class RepaymentConfirmation extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseRepaymentService)
  private caseRepaymentService: CaseRepaymentService;
  @State private principalList: any;


  private model: any = {
    collectorRealName: '',
    caseNumber: '',
    principalId: '',
    deptId: '',
    createTime: [],
    entryTime: [],
    manualConfirmDate: [],
    repayAmount: { min: '', max: '' },
    confirmState: '',
    manualConfirmRealName: '',
    repaymentAcctname: '',
    repaymentAcctno: '',
    receiveAcctname: '',
    receiveAcctno: ''
  }
  private rowData: any = {}
  private dialog: boolean = false
  private dataSet: any = []

  private departemntChange(id, code) { }

  private handleResetForm() {
    this.model.repayAmount = { min: '', max: '' }
  }

  private refreshData() {
    this.caseRepaymentService.getAllPaymentConfirmationList(this.paramsHandler(), this.pageService, this.sortService).subscribe(data => {
      this.dataSet = data || []
    })
  }

  private paramsHandler() {
    const params = { ...this.model }
    params.repayAmountMin = this.model.repayAmount.min
    params.repayAmountMax = this.model.repayAmount.max
    params.createTimeMin = this.model.createTime.length ? this.$filter.dateTimeFormat(this.model.createTime[0]) : ''
    params.createTimeMax = this.model.createTime.length ? this.$filter.dateTimeFormat(this.model.createTime[1]) : ''
    params.entryTimeMin = this.$filter.dateRanageFormat(this.model.entryTime).start
    params.entryTimeMax = this.$filter.dateRanageFormat(this.model.entryTime).end
    params.manualConfirmDateMin = this.model.manualConfirmDate.length ? this.$filter.dateTimeFormat(this.model.manualConfirmDate[0]) : ''
    params.manualConfirmDateMax = this.model.manualConfirmDate.length ? this.$filter.dateTimeFormat(this.model.manualConfirmDate[1]) : ''

    delete params.repayAmount
    delete params.entryTime
    delete params.createTime
    delete params.manualConfirmDate

    return params
  }

  private created() {
    this.refreshData()
  }

  private openExecutionPage(row) {
    this.$router.openCaseDetail(row.id, {
      menuChannel: MENU_CHANNEL.Repayment_confirmation,
      hiddenCaseList: true,
      hiddenAction: true
    })
  }

  private onClickSure(row) {
    this.dialog = true
    this.rowData = row
  }

  private onClickDetial(row) {
    this.dialog = true
    this.rowData = row
  }
}
</script>